<template>
	<view class="app" :style="skin">
		<jnavbar title="分销考核"></jnavbar>
		<view class="page_container">
			<view class="banner">
				<view class="u-flex u-flex-col u-col-top u-p-t-20 u-p-b-20 banner-top">
					<text class="u-m-b-10">可提现（元）</text>
					<text class="amount">{{ commission_info.assessment }}</text>
				</view>
				<view class="u-flex banner-bottom">
					<view class="u-flex u-flex-col u-flex-1 u-col-top ">
						<text class="u-m-b-10">累计阶梯佣金（元）</text>
						<text class="amount">{{ commission_info.assessment_total }}</text>
					</view>
					<view class="u-flex u-flex-col u-flex-1 u-col-top">
						<text class="u-m-b-10">已提现佣金（元）</text>
						<text class="amount">{{ commission_info.assessment_withdraw }}</text>
					</view>
				</view>
				<view class="withdraw-btn" @click="towithdraw"><text>提现</text></view>
			</view>
			<block v-if="assessment && assessment.id">
				<view class="content-box u-p-20">
					<view class="title u-m-b-20">
						<text class="title-lg u-m-r-20">{{ agent_grade ? agent_grade.name : '默认等级' }}分销商</text>
					</view>
					<view class="u-flex step-div">
						<view class="u-flex-1 " v-for="(item, i) in steps" :key="i">
							<text class="step-item" v-bind:class="item.is_success ? 'active' : ''">佣金{{ item.commission_rate }}%</text>
						</view>
					</view>
					<u-line-progress :show-percent="false" :percent="press"></u-line-progress>
					<view class="icon-div">
						<view class="u-flex ">
							<view class="u-flex-1" v-for="(item, i) in steps" :key="i"><text class="icon-item" v-bind:class="item.is_success ? 'active' : ''"></text></view>
						</view>
					</view>

					<view class="u-flex u-m-t-20">
						<view class="u-flex-1 u-text-center" v-for="(item, i) in steps" :key="i">
							<text class="assessmenttext">{{ item.assessment_success_value }}</text>
						</view>
					</view>
					<view class="u-m-t-20">
						<view>
							当前分销业绩
							<text class="assessmenttext">{{ stepsdetail.assessment_value }}</text>
							{{ assessment.assessment_type == 0 ? '元' : '单' }}
							<block v-if="stepsdetail.step != 2">
								,离下一阶段还差
								<text class="assessmenttext">{{ stepsdetail.next_value }}</text>
								{{ assessment.assessment_type == 0 ? '元' : '单' }}
							</block>
							<block v-else>已获得最大佣金比例</block>
						</view>
					</view>
				</view>
				<view class="content-box u-p-20">
					<view class="title u-m-b-20">
						<text class="title-lg u-m-r-20">阶梯佣金规则</text>
						<text class="u-tips-color">分销考核条件：{{ assessment.assessment_type == 0 ? '分销订单总额' : '分销订单总数' }}</text>
					</view>

					<view class="_table u-border">
						<view class="_th u-p-20 u-flex u-border-bottom">
							<view class=" u-flex-1"><text>分销商等级</text></view>
							<view class=" u-flex-2 u-flex">
								<view class="u-flex-2"><text>业绩区间</text></view>
								<view class="u-flex-1"><text>额外佣金</text></view>
							</view>
						</view>
						<view class="_tr u-flex u-p-20 u-border-bottom" v-for="(item, i) in rulelist" :key="i">
							<view class="_td u-flex-1 ">
								<text>{{ item.level_name }}</text>
							</view>
							<view class="_td u-flex-2">
								<view class="u-flex" v-if="assessment.is_degrade">
									<view class="u-flex-2 u-flex u-flex-col">
										<text>{{ item.degrade_min }}{{ assessment.assessment_type == 0 ? '元' : '单' }}</text>
										<text>(未达标自动降级)</text>
									</view>
									<view class="u-flex-1"><text>-</text></view>
								</view>
								<u-line v-if="assessment.is_degrade" margin="20rpx 0"></u-line>
								<block v-for="(data, index) in item.rule">
									<u-line v-if="index != 0" margin="20rpx 0"></u-line>
									<view class="u-flex" :key="'r' + index">
										<view class="u-flex-2">
											<text>
												{{ data.min }}{{ assessment.assessment_type == 0 ? '元' : '单' }}
												<text class="u-m-l-10 u-m-r-10">~</text>
												{{ data.max == -1 ? '无上限' : data.max }}{{ data.max != -1 ? (assessment.assessment_type == 0 ? '元' : '单') : '' }}
											</text>
										</view>
										<view class="u-flex-1">
											<text>{{ data.ladder_commission_rate }}%</text>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</view>
				<view class="content-box u-p-20">
					<view class="title u-m-b-20">
						<text class="title-lg u-m-r-20">活动规则</text>
						<u-parse :domain="baseUrl" :html="assessment.content" :show-with-animation="true"></u-parse>					
					</view>
					
					</view>
			</block>
			<block v-else>
				<view class="u-m-t-40"><u-empty text="暂无考核" mode="list"></u-empty></view>
			</block>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			rulelist: [],
			assessment: {},
			commission_info: {},
			steps: [],
			stepsdetail: {},
			press: 0,
			agent_grade: {}
		};
	},
	computed: {
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState({
			skin: state => state.skin
		})
	},
	async onLoad() {
		await this.$getWx;
		
	},
	onShow() {
		this.getdetail();
	},
	methods: {
		towithdraw(link) {
			this.Jumpurl({
				type: 1,
				link: 'withdrawdetail',
				login_type: 2
			});
		},
		getdetail() {
			this.$http('/agent/AssessmentInfo', {}, 'GET').then(res => {
				let json = res.data.msg;
				this.assessment = json.assessment;
				this.commission_info = json.commission_info;
				this.agent_grade = json.agent_grade;
				this.steps = json.steps;
				this.rulelist = json.assessment.role ? JSON.parse(json.assessment.role) : '';
				this.press = 0;
				let press_unit = (100 / this.steps.length).toFixed(2);
				this.steps.forEach((a, i) => {
					this.stepsdetail.assessment_value = a.assessment_value;

					if (a.is_success) {
						this.press = Number(press_unit) + this.press;
						this.stepsdetail.step = i;
					} else {
					}
				});
				let i = this.steps.findIndex(_ => _.is_success == 0);
				if (i > -1) {
					this.stepsdetail.next_value = Number(this.steps[i].assessment_success_value) - Number(this.steps[i].assessment_value) + 0.01;
				}

				// this.stepsdetail.next_value=
			});
		},
		logincallback() {}
	}
};
</script>

<style lang="scss">
.banner {
	position: relative;
	width: 750rpx;
	background-color: var(--main-color);
	padding: 16rpx 32rpx;
	color: #fff;
	.banner-top {
		.amount {
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	.banner-bottom {
		.amount {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.withdraw-btn {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		background-color: #fff;
		color: var(--main-color);
		padding: 0 24rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
	}
}
.content-box {
	background-color: #fff;
	border-radius: 20rpx;
	width: 720rpx;
	margin: 20rpx auto;
	position: relative;
}
._table {
	font-size: 28rpx;
}
._th {
	font-weight: bold;
	background-color: #edf0f3;
}
.title {
	font-size: 24rpx;
	.title-lg {
		font-size: 36rpx;
		font-weight: bold;
	}
}
.step-div {
	margin-bottom: 30rpx;
	> view {
		text-align: center;
	}
	.step-item {
		position: relative;

		color: var(--main-color);
		background: var(--content-color);
		border-radius: 20rpx;
		height: 40rpx;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 12rpx;
		line-height: 40rpx;

		&::after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-width: 12rpx 12rpx 0;
			border-style: solid;
			border-color: var(--content-color) transparent transparent;
			position: absolute;
			left: calc(50% - 12rpx);
		}
		&.active {
			color: #fff;
			background: var(--main-color);

			&::after {
				border-color: var(--main-color) transparent transparent;
			}
		}
	}
	view {
	}
}
.icon-div {
	width: 680rpx;
	position: absolute;
	top: 150rpx;
	> view {
		width: 100%;
		text-align: center;
		.icon-item {
			width: 50rpx;
			height: 50rpx;
			background-color: #fff;
			border: 8rpx solid var(--content-color);
			display: inline-block;
			border-radius: 50%;
			&.active {
				border: 8rpx solid var(--main-color);
			}
		}
	}
}
.assessmenttext {
	color: var(--main-color);
	font-weight: bold;
}
</style>
